<template>
  <div class="rk">
    <img src="../../assets/images/rkditu.png" alt="" class="rk-a" />
    <div class="rk-b">
      <div class="rk-c">国务院关于推进普惠金融高质量发展的实施意见</div>
      <div class="rk-cc">2023年10月11日</div>
    </div>

    <div class="rk-d" v-for="(item, index) in rk1list" :key="index">
      <div class="rk-dd">
        <img :src="item.image1" alt="" class="rk-d-a" />
        <div class="rk-d-aa">{{ item.title }}</div>
        <img src="../../assets/images/rkjiantou.png" alt="" class="rk-d-aaa" />
      </div>
    </div>

    <!-- <div class="rk-d" v-for="(item, index) in rklist" :key="index">
      <div class="rk-dd">
        <img :src="item.imge" alt="" class="rk-d-a" />
        <div class="rk-d-aa">{{ item.title }}</div>
        <img src="../../assets/images/rkjiantou.png" alt="" class="rk-d-aaa" />
      </div>
    </div> -->
    <div class="qqq">
      <div
        class="aaa"
        :class="{ a: item.name === aName }"
        @click="changeList(item)"
        v-for="(item, index) in list"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <!-- <div class="qqq">
      <div
        class="aaa"
        :class="{ a: index === aindex }"
        @click="changeList(index)"
        v-for="(item, index) in list"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div> -->

    <!-- <div class="rk-d" v-for="(item,index) in rk1list" :key="index">
      <div class="rk-dd">
        <img :src="item.imge" alt="" class="rk-d-a" >
       <div class="rk-d-aa">{{ item.title }}</div>
        <img src="../../assets/images/rkjiantou.png" alt="" class="rk-d-aaa" />
      </div>
    </div> -->
    <div class="b">
      <div
        class="bb"
        :class="{ bbb: index === anIndex }"
        v-for="(item, index) in anlist"
        :key="index"
        @click="getAnlist(index)"
      >
        {{ item.uname }}
      </div>
    </div>
    <!-- <div class="b">
      <div
        class="bb"
        :class="{ 'bbb': item.uname===anItem}"
        v-for="(item, index) in anlist"
        :key="index"
        @click="getAnlist(item)"
      >
        {{ item.uname }}
      </div>
    </div> -->
    <div class="qw">
      <div
        class="we"
        :class="{ qww: item.uname === anItem }"
        v-for="(item, index) in qw"
        :key="index"
        @click="gotList(item)"
      >
        {{ item.uname }}
      </div>
    </div>
    <!-- <div class="qw">
      <div
        class="we"
        :class="{ qww: item.uname === wItem }"
        v-for="(item, index) in qw"
        :key="index"
        @click="gotList(item.uname)"
      >
        {{ item.uname }}
      </div>
    </div> -->
    <div class="aaa">
      <div
        class="aaaa"
        :class="{ aaaaa: item.uname === anItem }"
        @click="getlist11(item,index)"
        v-for="(item, index) in anlist"
        :key="index"
      >
        {{ item.uname }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: {},
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      asd: 0,
      rk1list: [
        { title: "现在风格和", imge1: require("../../assets/images/1.png") },
      ],
      anItem: "按钮1",
      anIndex: 0,
      anlist: [{ uname: "按钮1" }, { uname: "按钮2" }],
      rklist: [
        { title: "现在该", imge: require("../../assets/images/1.png") },
        { title: "现在该", imge: require("../../assets/images/1.png") },
        { title: "现在该", imge: require("../../assets/images/1.png") },
        { title: "现在该", imge: require("../../assets/images/1.png") },
      ],
      // rklist: [
      //   {
      //     title: "乡村振兴",
      //     imge: require("../../assets/images/rk1.png"),
      //   },
      //   {
      //     title: "乡村振兴",
      //     imge: require("../../assets/images/rk1.png"),
      //   },
      //   {
      //     title: "乡村振兴",
      //     imge: require("../../assets/images/rk1.png"),
      //   },
      //   {
      //     title: "乡村振兴",
      //     imge: require("../../assets/images/rk1.png"),
      //   },
      // ],

      list: [{ name: "按钮1" }, { name: "按钮2" }],
      aindex: 0,
      aName: "",
      // rk1list:[
      //   {
      //     imge:require('../../assets/images/rk1.png'),
      //     title:'乡村振兴',
      //   },
      //   {
      //     imge:require('../../assets/images/rk2.png'),
      //     title:'普惠小微',
      //   },
      //   {
      //     imge:require('../../assets/images/rk3.png'),
      //     title:'乡村振兴',
      //   }
      // ]
      qw: [{ uname: "按钮1" }, { uname: "按钮2" }],
      wItem: "按钮1",
      wIndex: 0,
      //     rklist: [
      //       {
      //         imge:require('../../assets/images/rk1.png'),
      //         title:'乡村振兴'
      //       },
      //       {
      //         imge:require('../../assets/images/rk2.png'),
      //         title:'普惠小微'
      //       },
      //     {
      //       imge:require('../../assets/images/rk3.png'),
      //       title:'制造业转型',
      //     },
      //   {
      //     imge:require("../../assets/images/rk4.png"),
      //     title:'乡村振兴',
      //   },
      //   {
      //     imge:require('../../assets/images/rk5.png'),
      //     title:'乡村振兴',
      //   },
      // ],
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    // this.aName = this.list[0].name;
  },
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    getlist11(item) {
      this.anItem = item.uname;
    },
   
    getAnlist(aa) {
      this.anIndex = aa;
    },
    // getAnlist(aa) {
    //   this.anItem = aa.uname;
    // },

    gotList(aa) {
      this.wItem = aa;
    },
    gotList(aa) {
      this.wIndex = aa;
    },

    // changeList(aa) {
    //   this.aindex = aa;
    // },
    changeList(aa) {
      this.aName = aa.name;
    },
  },
};
</script>

<style scoped lang="scss">
.rk {
  //   background-image: url("../../assets/images/rkbeijing.png");
  //   background-repeat: no-repeat;
  //   background-size: cover;
  height: 844px;
  .aaa {
    display: flex;
    margin: 10px 16px 0 16px;
    height: 20px;
    .aaaa {
      width: 50%;
      border: 1px solid red;
    }
    .aaaaa {
      background-color: aqua;
    }
    .aaaaa:first-of-type {
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }
    .aaaaa:last-of-type {
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
    }
  }
  .qw {
    display: flex;
    margin: 10px 16px 0 16px;
    height: 20px;
    // border: 1px solid red;
    .we {
      width: 50%;
      border: 1px solid red;
    }
    .qww {
      background-color: brown;
    }
    .qww:first-child {
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }
    .qww:last-child {
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
    }
  }
  .rk-a {
    margin: 54px 16px 0 16px;
    height: 77px;
    width: auto;
  }
  .rk-b {
    margin: 14px 16px 0 16px;
    border-radius: 4px;
    height: 67px;
    background: linear-gradient(
      133deg,
      rgba(223, 67, 51, 0.14),
      rgba(246, 84, 84, 0.14)
    );
    box-shadow: 0px 0px 6px 0px rgba(76, 166, 209, 0.29);
    display: flex;
    flex-direction: column;
    justify-content: center;
    .rk-c {
      margin-left: 11px;

      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      font-size: 15px;
      color: #000000;
    }
    .rk-cc {
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      font-size: 12px;
      color: #464646;
      margin-left: 11px;
    }
  }
  .rk-d {
    margin: 3px 16px 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 109px;
    // border: 1px solid red;
    background-image: url("../../assets/images/rkshuzi.png");
    background-size: cover;
    background-repeat: no-repeat;
    .rk-dd {
      display: flex;
      margin: 0 27px 0 27px;
      //   border: 1px solid red;
      align-items: center;
      .rk-d-a {
        height: 42px;
        width: 42px;
      }
      .rk-d-aa {
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        font-size: 17px;
        color: #000000;
        margin-left: 6px;
      }
      .rk-d-aaa {
        width: 9px;
        height: 10px;
        margin-left: auto;
      }
    }
  }
  .qqq {
    display: flex;
    height: 15px;
    //  border: 1px solid red;
    margin: 15px 50px 0 50px;
    .aaa {
      width: 50%;
      text-align: center;
      border: 1px solid red;
    }
    .aaa:first-of-type {
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }
    .aaa:last-of-type {
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
    }
    .a {
      background-color: green;
    }
  }
  .b {
    margin: 10px 20px 0 20px;
    display: flex;
    height: 20px;
    // border: 1px solid red;
    .bb {
      width: 50%;
      text-align: center;
      border: 1px solid red;
    }
    .bb:first-of-type {
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }
    .bb:last-of-type {
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
    }
    .bbb {
      background-color: burlywood;
    }
  }
}
</style>
